<template>
  <su-popup
    :show="show"
    type="bottom"
    round="20"
    @close="emits('close')"
    showClose
    backgroundColor="#f2f2f2"
  >
    <view class="model-box">
      <view class="title ss-m-t-16 ss-m-l-20 ss-flex">抵扣</view>
	  <view class="money-content">
		  <text>{{$t('pages.user.order.shengyu')}}{{typeMaps[type]}}:</text>
		  <text class="money-value">{{userInfo[type]}}</text>
	  </view>
      <view class="radio-list" v-for="(item, index) in radioList" :key="index">
        <label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
          <radio
            color="var(--ui-BG-Main)"
            style="transform: scale(0.8)"
            :checked="state.couponId == item.id"
            @tap.stop="radioChange(item.id)"
          />
		  <text>{{item.name}}</text>
        </label>
      </view>
    </view>
    <view class="modal-footer ss-flex">
      <button class="confirm-btn ss-reset-button" @tap="onConfirm">确认</button>
    </view>
  </su-popup>
</template>
<script setup>
  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import { useI18n } from 'vue-i18n'
  const { t }  = useI18n()
  
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const typeMaps = {
  	  'money': t('pages.goods.pay.money'),
  	  'gold': t('pages.user.wallet.gold'),
  	  'golden': t('pages.user.walletMap.goldenBalance'),
  	  'silver': t('pages.user.walletMap.silverBeans'),
  	  'firepower': t('pages.user.walletMap.fire'),
  }
  
  const props = defineProps({
    modelValue: {
      type: [Number, String]
    },
	type: {
	  type: String
	},
    show: {
      type: Boolean,
      default: false,
    },
  });
  const radioList = [
	  {id: 0, name: '不抵扣'},
	  {id: 1, name: '抵扣'},
  ]
  const emits = defineEmits(['confirm', 'close']);
  const state = reactive({
    couponId: computed(() => props.modelValue),
  });
  function radioChange(couponId) {
	  emits('update:modelValue', couponId)
    // if (state.couponId == couponId) {
    //   state.couponId = 0;
    // } else {
    //   state.couponId = couponId;
    // }
  }
  const onConfirm = () => {
    emits('confirm', {type: props.type, value: state.couponId});
  };
</script>
<style lang="scss" scoped>
  :deep() {
    .uni-checkbox-input {
      background-color: var(--ui-BG-Main);
    }
  }
  .money-content {
	  padding: 20rpx;
	  
	  .money-value {
		  font-size: 40rpx;
		  color: #ff0003;
		  margin-left: 20rpx;
	  }
  }
	.radio-list {
		padding: 10rpx;
	}
  .model-box {
    height: 30vh;
  }
  .title {
    font-size: 36rpx;
    height: 80rpx;
    font-weight: bold;
    color: #333333;
  }
  .subtitle {
    font-size: 26rpx;
    font-weight: 500;
    color: #333333;
  }
  .model-content {
    height: 54vh;
  }
  .modal-footer {
    width: 100%;
    height: 120rpx;
    background: #fff;
  }
  .confirm-btn {
    width: 710rpx;
    margin-left: 20rpx;
    height: 80rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    border-radius: 40rpx;
    color: #fff;
  }
  .reason-title {
    font-weight: 600;
    font-size: 20rpx;
    line-height: 26rpx;
    color: #ff0003;
  }
  .reason-desc {
    font-weight: 600;
    font-size: 20rpx;
    line-height: 26rpx;
    color: #434343;
  }
</style>
